<template>
  <div class="home">
    <div class="swiper-container">
      <div class="swiper-wrapper">
          <div class="swiper-slide"><img src="../images/slide1.jpg" alt=""></div>
          <div class="swiper-slide"><img src="../images/slide2.jpg" alt=""></div>
          <div class="swiper-slide"><img src="../images/slide3.jpg" alt=""></div>
          <div class="swiper-slide"><img src="../images/slide1.jpg" alt=""></div>
          <div class="swiper-slide"><img src="../images/slide2.jpg" alt=""></div>
        </div>
      <!-- 如果需要分页器 -->
      <div class="swiper-pagination"></div>
    </div>
    <div class="adv">
      <div><i>&#xf0e3;</i><span>官方正品</span></div>
      <div><i>&#xf07f;</i><span>顺丰极速达</span></div>
      <div><i>&#xf079;</i><span>全国联保</span></div>
      <div><i>&#xf030;</i><span>镭雕定制</span></div>
    </div>
    <div class="shopping">
      <div class="value_for_money shop">
        <h2 class="title">—<span>超值拼团</span>—</h2>
        <ul>
          <div>
            <a href="#">
              <img src="../images/shopping_tuan1.png" draggable="false"  alt="">
              <h4>vivo 2A USB数据线</h4>
              <p class="detail">官方原装正品，支持18W有限快充</p>
              <p class="price">拼团价：<span>￥</span><span>9.9</span></p>
              <p class="del"><del>￥19</del></p>
            </a>
            <a href="#">
              <img src="../images/shopping_tuan.png" draggable="false"  alt="">
              <h4>闪迪至尊版存储卡64G</h4>
              <p class="detail">传输速度100MB/秒，更快，更便捷</p>
              <p class="price">拼团价：<span>￥</span><span>79</span></p>
              <p class="del"><del>￥99</del></p>
            </a>
            <a href="#">
              <img src="../images/shopping_tuan1.png" draggable="false"  alt="">
              <h4>vivo 2A USB数据线</h4>
              <p class="detail">官方原装正品，支持18W有限快充</p>
              <p class="price">拼团价：<span>￥</span><span>9.9</span></p>
              <p class="del"><del>￥19</del></p>
            </a>
            <a href="#">
              <img src="../images/shopping_tuan.png" draggable="false"  alt="">
              <h4>闪迪至尊版存储卡64G</h4>
              <p class="detail">传输速度100MB/秒，更快，更便捷</p>
              <p class="price">拼团价：<span>￥</span><span>79</span></p>
              <p class="del"><del>￥99</del></p>
            </a>
            <a href="#">
              <img src="../images/shopping_tuan1.png" draggable="false"  alt="">
              <h4>vivo 2A USB数据线</h4>
              <p class="detail">官方原装正品，支持18W有限快充</p>
              <p class="price">拼团价：<span>￥</span><span>9.9</span></p>
              <p class="del"><del>￥19</del></p>
            </a>
            <a href="#">
              <img src="../images/shopping_tuan.png" draggable="false"  alt="">
              <h4>闪迪至尊版存储卡64G</h4>
              <p class="detail">传输速度100MB/秒，更快，更便捷</p>
              <p class="price">拼团价：<span>￥</span><span>79</span></p>
              <p class="del"><del>￥99</del></p>
            </a>
            <a href="#">
              <img src="../images/shopping_tuan1.png" draggable="false"  alt="">
              <h4>vivo 2A USB数据线</h4>
              <p class="detail">官方原装正品，支持18W有限快充</p>
              <p class="price">拼团价：<span>￥</span><span>9.9</span></p>
              <p class="del"><del>￥19</del></p>
            </a>
            <a href="#">
              <img src="../images/shopping_tuan.png" draggable="false"  alt="">
              <h4>闪迪至尊版存储卡64G</h4>
              <p class="detail">传输速度100MB/秒，更快，更便捷</p>
              <p class="price">拼团价：<span>￥</span><span>79</span></p>
              <p class="del"><del>￥99</del></p>
            </a>
          </div>
          
        </ul>
        <a href="#" class="more">查看更多</a>
      </div>
      <div class="hot_models shop">
        <h2 class="title">—<span>热销机型</span>—</h2>
        <div class="phones">
          <div class="phone">
            <a href="#/prodetail"><img src="../images/phone1.png" alt=""></a>
            <h4>iQOO Z1</h4>
            <p class="detail">全球首款5G+5G 双卡双待，超长待机</p>
            <p class="price"><span>￥</span>2299</p>
          </div>
          <div class="phone">
            <a href="#/prodetail"><img src="../images/phone2.png" alt=""></a>
            <h4>vivo Y3</h4>
            <p class="detail">5000mAh大电池</p>
            <p class="price"><span>￥</span>1198</p>
          </div>
          <div class="phone">
            <a href="#/prodetail"><img src="../images/phone1.png" alt=""></a>
            <h4>iQOO Z1</h4>
            <p class="detail">全球首款5G+5G 双卡双待，超长待机</p>
            <p class="price"><span>￥</span>2299</p>
          </div>
          <div class="phone">
            <a href="#/prodetail"><img src="../images/phone2.png" alt=""></a>
            <h4>vivo Y3</h4>
            <p class="detail">5000mAh大电池</p>
            <p class="price"><span>￥</span>1198</p>
          </div>
          <div class="phone">
            <a href="#/prodetail"><img src="../images/phone1.png" alt=""></a>
            <h4>iQOO Z1</h4>
            <p class="detail">全球首款5G+5G 双卡双待，超长待机</p>
            <p class="price"><span>￥</span>2299</p>
          </div>
          <div class="phone">
            <a href="#/prodetail"><img src="../images/phone2.png" alt=""></a>
            <h4>vivo Y3</h4>
            <p class="detail">5000mAh大电池</p>
            <p class="price"><span>￥</span>1198</p>
          </div>
          <div class="phone">
            <a href="#/prodetail"><img src="../images/phone1.png" alt=""></a>
            <h4>iQOO Z1</h4>
            <p class="detail">全球首款5G+5G 双卡双待，超长待机</p>
            <p class="price"><span>￥</span>2299</p>
          </div>
          <div class="phone">
            <a href="#/prodetail"><img src="../images/phone2.png" alt=""></a>
            <h4>vivo Y3</h4>
            <p class="detail">5000mAh大电池</p>
            <p class="price"><span>￥</span>1198</p>
          </div>
        </div>
        <a href="#" class="more">查看更多</a>
      </div>
      <div class="boutique_accessories shop">
        <h2 class="title">—<span>精品配件</span>—</h2>
        <div class="pasts">
          <div class="past">
            <a href="#"><img src="../images/parts1.png" alt=""></a>
            <h4>X30 Pro手机保护壳</h4>
            <p class="detail">其境系列设计 | 精准适合手机的保护套</p>
            <p class="price"><span>￥</span>29</p>
          </div>
          <div class="past">
            <a href="#"><img src="../images/parts2.png" alt=""></a>
            <h4>iQOO 5A Type-C充电线</h4>
            <p class="detail">5A大电流 | 线夹收纳 | 线长合理</p>
            <p class="price"><span>￥</span>59</p>
          </div>
          <div class="past">
            <a href="#"><img src="../images/parts2.png" alt=""></a>
            <h4>iQOO 5A Type-C充电线</h4>
            <p class="detail">5A大电流 | 线夹收纳 | 线长合理</p>
            <p class="price"><span>￥</span>59</p>
          </div>
          <div class="past">
            <a href="#"><img src="../images/parts1.png" alt=""></a>
            <h4>X30 Pro手机保护壳</h4>
            <p class="detail">其境系列设计 | 精准适合手机的保护套</p>
            <p class="price"><span>￥</span>29</p>
          </div>
          <div class="past">
            <a href="#"><img src="../images/parts1.png" alt=""></a>
            <h4>X30 Pro手机保护壳</h4>
            <p class="detail">其境系列设计 | 精准适合手机的保护套</p>
            <p class="price"><span>￥</span>29</p>
          </div>
          <div class="past">
            <a href="#"><img src="../images/parts2.png" alt=""></a>
            <h4>iQOO 5A Type-C充电线</h4>
            <p class="detail">5A大电流 | 线夹收纳 | 线长合理</p>
            <p class="price"><span>￥</span>59</p>
          </div>
          <div class="past">
            <a href="#"><img src="../images/parts2.png" alt=""></a>
            <h4>iQOO 5A Type-C充电线</h4>
            <p class="detail">5A大电流 | 线夹收纳 | 线长合理</p>
            <p class="price"><span>￥</span>59</p>
          </div>
          <div class="past">
            <a href="#"><img src="../images/parts1.png" alt=""></a>
            <h4>X30 Pro手机保护壳</h4>
            <p class="detail">其境系列设计 | 精准适合手机的保护套</p>
            <p class="price"><span>￥</span>29</p>
          </div>
        </div>
        <a href="#" class="more">查看更多</a>
      </div>
    </div>
  </div>

</template>

<script>
//帕斯卡命名 FullName
function Home(){
  var swiper = new Swiper('.swiper-container',{
    loop:true,
    autoplay:{
      delay: 5000,
      stopOnLastSlide: false,
      disableOnInteraction:false,
    },
    pagination: {
    el: '.swiper-pagination',
    clickable: true,
    },
  });
  $('.header span').text('vivo官方商城');
  $('.header a').css('display','none');
  $('.app .footbar').css('display', 'flex');
  $('.app .footbar a:eq(1)').css('display','flex');
  $('.app .footbar a:eq(2)').css('display','flex');
  $('.app .footbar a.buy').css('display','none');
  
}

</script>